<template>
    <div class="Person">
        <div class="Person-title">
            <h5>备案人设置</h5>
        </div>
        <div class="Person-centent" v-show="isShow">
            <div class="row">
                <!-- <div class="search">
                    <a class="btn" @click="create"><i class="fa fa-plus"></i>新增</a>      
                </div>     -->
          <!-- fa fa-refresh -->
                    <div class="search">
                        <a class="btn" @click="dialogTableVisible = true"><i class="fa fa-plus"></i>新增</a>      
                    </div>    
                <div class="tt">
                    
                    <el-table :data="tableData" style="width: 100%">
                          <!-- <el-table-column type="index" label="ID" width="50"></el-table-column> -->
                          <el-table-column property="assignee" label="员工编号" width="100"></el-table-column>
                          <el-table-column property="assigneeName" label="员工名称" width="100"></el-table-column>
                          <el-table-column property="setid" label="二级公司ID" width="120"></el-table-column>
                          <!-- <el-table-column property="setName" label="二级公司" min-width="180"></el-table-column> -->
                          <el-table-column property="depId" label="部门ID" width="95"></el-table-column>
                          <el-table-column property="depName" label="部门名称" min-width="150"></el-table-column>
                          <!-- <el-table-column property="" label="创建人" width="100"></el-table-column> -->
                          <!-- <el-table-column property="fromKey" label="备案类型" width="95"></el-table-column> -->
                          <el-table-column property="fromKeyName" label="备案范围" width="95"></el-table-column>

                          <el-table-column property="createName" label="创建人名称" width="110"></el-table-column>
                          <el-table-column property="createDt" label="创建时间" width="120"></el-table-column>
                          
                          <el-table-column property="" label="操作" width="80">
                              <template slot-scope="scope">
                                <!-- <el-tooltip :content="'Switch value: ' + value3" placement="top"> -->
                                <!-- <el-switch
                                    v-model="value3"
                                    on-color="#18A869"
                                    off-color="#7e9792"
                                    on-text="启用"
                                    off-text="禁用"
                                    >
                                </el-switch> -->
                                <!-- <span class="opt-btn-sp"><a @click.stop="salaryDetail2(scope.row)"><i></i>编辑</a></span>                                       -->
                                <span style="cursor:pointer" class="delete" @click="deleteData(scope.row)"><a> 删除 </a></span>                                      
                                <!-- <span class="opt-btn-sp"><a @click.stop="salaryDetail2(scope.row)"><i></i>启用</a></span>                                       -->
                              </template>
                          </el-table-column>
                    </el-table>

                    <div class="fenye">
                      <el-pagination
                          
                        @size-change="handleSizeChange2"
                        @current-change="handleCurrentChange2"
                        :current-page.sync="page2.pageNum"
                        :page-size="page2.pageSize"
                        :page-sizes="[10, 50, 100, 200,400]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page2.total"
                        >

                        </el-pagination>
                    </div>
                    
                    
                            <el-dialog top='5vh' @open='search' title="新增人事备案" :visible.sync="dialogTableVisible">
                                <el-input
              v-model.trim='searchValue'
              @keyup.enter.native.stop = 'search'
              placeholder="请输入8位员工编号或姓名查询"
              style='width:400px'>
              </el-input>
              <el-button class="search-button" @click='search'>搜索</el-button>
                  <el-table max-height='370' :data="gridData">
                      <el-table-column property="emplid" label="员工编号" width="100"></el-table-column>
                      <el-table-column property="name" label="员工名称" width="100"></el-table-column>
                      <el-table-column property="setid" label="二级公司ID" width="110"></el-table-column>
                      <el-table-column property="deptid" label="部门ID" width="100"></el-table-column>
                      <el-table-column property="dept_descr" label="部门名称" min-width="120"></el-table-column>
                      <el-table-column
                        label="操作"
                        align="center"
                      >
                        <template scope="scope">
                          <el-tag
                            style='cursor:pointer'
                            type="success"
                            @click.stop.native ='save(scope.row)'
                          >添加</el-tag>
                        </template>
                      </el-table-column>
                  </el-table>

                    <div class="fenye">
                      <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="page.num"
                        :page-size="page.size"
                        :page-sizes="[10, 20, 50, 100]"
                        layout="total, prev, pager, next, jumper"
                        :total="page.total"
                      >
                      </el-pagination>
                    </div>
                  <!-- <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogTableVisible=false">取消</el-button>
                  </span> -->
                </el-dialog>
                </div>       
            </div>
        </div>

        <el-dialog top='22vh' size='tiny' title="请选择备案范围" :visible.sync="searchDialog">
          <div style="text-align:center;margin:30px 0 20px 0">
            <el-checkbox-group :min="1" v-model='addCheckVal'>
              <el-checkbox label="1">内地</el-checkbox>
              <el-checkbox label="2">内派</el-checkbox>
              <el-checkbox label="3">香港</el-checkbox>
            </el-checkbox-group>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="searchDialog=false">取 消</el-button>
             <el-button type="primary" @click="addSure">保 存</el-button>
          </span> 
        </el-dialog>
    </div>
</template>

<script>
//import 'Mock/mock_data'
import Vue from 'vue'
import Axios from 'axios'
import { CheckboxGroup, Loading, Message, MessageBox, Checkbox, Switch, Pagination } from 'element-ui'
Vue.use(CheckboxGroup)
Vue.use(Checkbox)
Vue.use(Switch)
Vue.use(Pagination)
Vue.use(Loading)
import cardLeader from '@/components/card-leader'
import searchBox from '@/components/search-box'
export default {
	data () {
		return {
			addCheckVal: ['1'],
			visible2: false,
			dialogName: '',
			dialogTableVisible: false,
			searchDialog: false,
			isShow: true,
			tableData: [], //渲染页面
			checkList: [],
			addParams: {},
			// currentRow: null
			gridData: [],
			searchValue: '',
			title: '',
			id: null,
			page: {
				size: 10,
				num: 1,
				total: 0
			},
			page2: {
				size: 10,
				num: 1,
				total: 0
			}
		}
	},
	mounted: function () {
		this.salaryDetail()
	},
	methods: {

		handleSizeChange2 (val) {
			this.page2.size = val
			this.salaryDetail()
		},
		handleCurrentChange2 (val) {
			this.page2.num = val
			this.salaryDetail()
		},


		handleSizeChange (val) {
			this.page.size = val
			this.search()
		},
		handleCurrentChange (val) {
			this.page.num = val
			this.search()
		},

		salaryDetail () {


			const params = {
				pageNum: this.page2.num,
				pageSize: this.page2.size
			}
			this.Axios
				.Post('/workFlowProcessNodeConfAssignee/getHrlist', params)
				.then((res) => {
					this.tableData = res.data.datas
					this.page2.pageNum = res.data.pageNum
					this.page2.total = res.data.total
				})
			//  this.dialogTableVisible = true;
		},
		search () {

			let params = {
				pageNum: this.page.num,
				pageSize: 10,
				search: this.searchValue,
				token: localStorage.getItem('token')
			}

			const loding = Loading.service({
				target: document.querySelector('.contentBox'),
				text: '加载中'
			})

			Axios
				.post(this.Axios.baseURI + '/workFlowProcessNodeConfAssignee/getUserBySearch', params)
				.then((res) => {
					this.gridData = res.data.datas
					res.data.page && (this.page.total = res.data.page.total)
					loding.close()
				})
			//  this.dialogTasearch (bleVisible = true;
		},
		save (row) {

			this.dialogTableVisible = false
			const { emplid, name, setid, deptid, dept_descr, business_descr } = row
			this.addParams = {
				'assigneeName': name,
				'assignee': emplid,
				'depId': deptid,
				'depName': dept_descr,
				'setName': business_descr,
				'setid': setid,
			}
			this.searchDialog = true

		},

		addSure () {
			this.addParams.beianRange = this.addCheckVal.join(',')
			this.Axios.Post('/workFlowProcessNodeConfAssignee/saveHrEmp', this.addParams)
				.then(res => {
					this.gridData = res.data.datas
					if (res.data.status == 1) {
						Message.success(res.data.message)
						this.salaryDetail()
					}
					this.searchDialog = false
				})
		},
		deleteData (row) {

			MessageBox.confirm(`确认删除${row.assigneeName}？`, '询问', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					let params = {
						emplid: row.assignee
					}
					this.Axios.Post('/workFlowProcessNodeConfAssignee/deleteHr', params)
						.then(res => {
							this.gridData = res.data.datas
							if (res.data.status == 1) {
								Message.success(res.data.message)

								this.salaryDetail()
							}
						})
				})
				.catch(() => { })

		}

	},
	props: {
		personInfo: {
			type: String,
			default: ''
		},
	},

	beforeDestroy: function () {
		window.getFlowProcessFrom = null
		window.getFlowProcessApplyFrom = null
		window.getFlowProcessApprovedFrom = null
	},
	components: {
		cardLeader,
		searchBox
	}
}
</script>

<style scoped>
.tt {
  padding: 0 20px;
}
.search-button {
  margin-bottom: 20px;
}
.checkbox-group div {
  margin-bottom: 10px;
}
.nodata {
  display: block;
  text-align: center;
}
.Person-title {
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 2px 0 0;
  color: inherit;
  margin-bottom: 0;
  color: #6c6a6c;
  padding: 15px 15px 7px;
  min-height: 48px;
}
.Person-centent {
  padding: 0px 10px 40px;
  clear: both;
  background-color: #ffffff;
  color: inherit;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
}
.Person .row {
  margin-right: -10px;
  margin-left: -10px;
}
.row .search {
  width: 100%;
  margin-top: 15px;
  margin-left: 7px;
}
.row .search .btn {
  width: 70px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  color: #fff;
  display: inline-block;
  background-color: #18a689;
  border-radius: 5px;
}
.row .search .btn:first-child {
  /* margin-left: 20px; */
}

.row .search .btn:hover {
  background-color: #ccc;
  color: #000;
  cursor: pointer;
}
.row .search .wi {
  width: 33.3333333%;
}
/* .el-button {
  background: #1ab394;
  border: 1px solid #1ab394;
  color: #fff;
} */
.search-l {
  width: 33.3333333%;
  margin-bottom: 5px;
}
.delete > a {
  border: 1px solid #ec4758;
  background: #ec4758;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  margin: 10px 0;
}
.row .search {
  width: 100%;
  margin-bottom: 15px;
  padding-left: 12px;
  padding-right: 12px;
}
.row .search .btn {
  width: 70px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  color: #fff;
  display: inline-block;
  background-color: #18a689;
  border-radius: 5px;
}
/* .el-button .r{
  width:66.66666667%;
} */
/* .el-input-group__append .el-button{
  background:#1AB394;
  color:#fff;
} */
/*table*/
/* .el-table__header-wrapper thead div {
    background-color: #fff;
    color: #1f2d3d;
} */
.row .search {
  width: 100%;
  margin-bottom: 15px;
  padding-left: 12px;
  padding-right: 12px;
}
.row .search .btn {
  width: 70px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  color: #fff;
  display: inline-block;
  background-color: #18a689;
  border-radius: 5px;
}
.row .search .btn:first-child {
  /* margin-left: 20px; */
}

.row .search .btn:hover {
  background-color: #ccc;
  color: #000;
  cursor: pointer;
}
.row .search .wi {
  width: 33.3333333%;
}
/* .el-button {
  background: #1ab394;
  border: 1px solid #1ab394;
  color: #fff;
} */
/* .btn-sp{
    padding-left: -10px;
} */
/* .btn-sp>a{
    border:1px solid #23c6c8;
    background: #23c6c8;
    color:#fff;
    border-radius: 3px;
    padding:2px 9px;
    font-size:12px;
    display:inline-block;
    margin-top:5px;
    
} */
.opt-btn-sp > a {
  border: 1px solid #18a689;
  background: #18a689;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  /* margin-top:5px; */
}
/* .delete>a{
     border:1px solid #ec4758;
    background: #ec4758;
    color:#fff;
    border-radius: 3px;
    padding:2px 9px;
    font-size:12px;
    display:inline-block;
    margin-top:5px;
} */
.el-pagination {
  margin-top: 20px;
}
</style>
<style>
/*修改element-ui样式*/
/* .el-button.is-disabled.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover{
    color:#fff;
    background:#7e9792;
    border:1px solid #7e9792;
    padding:8px 10px;
    font-size:13px;
} */
/* .Person .el-radio-button__inner:hover {
  color: #333;
}
.Person .el-radio-group .el-radio-button__inner:hover {
  background-color: #e7e7e7;
}
.Person .el-radio-group .el-radio-button__inner {
  background-color: #f4f4f4;
}

.Person .el-radio-group .is-active .el-radio-button__inner:hover {
  background-color: #d4d4d4 !important;
} */
/*i*/
/* .Person
  .el-menu--collapse
  > .el-submenu
  > .el-submenu__title
  [class^='el-icon-'] {
  margin: 0;
  vertical-align: middle;
  width: 14px;
  text-align: center;
}
.Person .el-input-group--append .el-input__inner,
.Person .el-input-group__prepend {
  border-width: 1px 0px 1px 1px;
} */
/* .el-input-group__append .el-button[data-v-4fefba28]{
      border:1px solid #1AB394;
      border-radius:0px 3px 3px 0px;
      line-height:0.99;
} */
/*table*/
/* .Person .el-table {
  border: none !important;
}
.Person .el-table th {
  background: #fff !important;
  height: 52px !important;
  vertical-align: left !important;
}
.Person .el-table__footer-wrapper thead div,
.Person .el-table__header-wrapper thead div {
  background: #fff !important;
}
.Person .el-table .cell {
  padding: 10px;
  cursor: pointer;
  text-align: center;
}
.Person .el-table::after {
  height: 0 !important;
}
.Person .el-table__header-wrapper .el-table__header {
  width: 100% !important;
}

.Person .el-table__body-wrapper > table {
  width: 100% !important;
} */

/* .Person .el-table__body-wrapper {
  overflow: hidden !important;
} */
/* .el-table .cell, .el-table th>div{
    padding-left: 5px ! important;
    padding-right: 5px ! important;
} */
/* .Person-tools dh{
    background:red;
   display:inline-block;
} */
</style>
